<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的待办清单</title>
</head>
<body>
    <div class="nav">
        <input type="text" class="task">
        <button>新建任务</button>
    </div>
    <div class="container">
        <div class="todo">
            <h3>未完成</h3>
        </div>
        <div class="done">
            <h3>已完成</h3>
        </div>
    </div>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            width: 800px;
            margin: 0 auto;
            display: flex;
        }

        .todo, .done {
            width: 50%;
            height: 100%;
        }

        .container h3 {
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: #333;
            color: #fff;
        }

        .nav {
            width: 800px;
            height: 100px;
            margin: 0 auto;
            display: flex;
            align-items: center;
        }

        .nav input {
            width: 600px;
            height: 50px;
        }

        .nav button {
            width: 200px;
            height: 50px;
            border: none;
            background-color: orange;
            color: #fff;
            font-size: medium;
        }

        .row {
            height: 50px;
            display: flex;
            align-items: center;
        }

        .row input {
            margin: 0 10px;
        }

        .row span {
            width: 300px;
        }

        .row button {
            width: 50px;
            height: 40px;
        }

    </style>

    <!-- 实现功能 -->
    <script>
        // 新增待办事项
        var addTaskBtn = document.querySelector('.nav button');
        addTaskBtn.onclick = function() {
            //1. 获取任务内容
            var input = document.querySelector('.nav input');
            var task = input.value;
            //2. 根据任务内容创建新元素
            var row = document.createElement('div');
            row.className = 'row';
            var checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            var span = document.createElement('span');
            span.innerHTML = task;
            var button = document.createElement('button');
            button.innerHTML = '删除';
            row.appendChild(checkbox);
            row.appendChild(span);
            row.appendChild(button);
            //3. 将新节点放到未完成列表中
            var todo = document.querySelector('.todo');
            todo.appendChild(row);
            //4. 清空输入框中的内容
            input.value = '';

            // 已完成
            // 1.给checkbox注册点击事件
            checkbox.onclick = function() {
                // 获取父元素
                var row = this.parentNode;
                // 先出发checked为true，在调用onclick函数
                if (this.checked) {
                    var target = document.querySelector('.done');
                } else {
                    var target = document.querySelector('.todo');
                }
                target.appendChild(row);
            }

            // 删除任务
            button.onclick = function() {
                var row = this.parentNode;
                var grandParent = row.parentNode;
                grandParent.removeChild(row);
            }

        }

        
    </script>

</body>
</html>